<template>
  <block v-if="position == 'top'">
    <view
      class="tui-tips-class tui-toptips"
      :style="{ backgroundColor: backgroundColor, color: color, fontSize: size + 'rpx' }"
      :class="[show ? 'tui-top-show' : '']"
    >
      {{ msg }}
    </view>
  </block>
  <block v-else>
    <view
      class="tui-tips-class tui-toast"
      :class="[
        position == 'center' ? 'tui-centertips' : 'tui-bottomtips',
        show ? 'tui-toast-show' : '',
      ]"
    >
      <view
        class="tui-tips-content"
        :style="{ backgroundColor: backgroundColor, color: color, fontSize: size + 'rpx' }"
      >
        {{ msg }}
      </view>
    </view>
  </block>
</template>

<script>
export default {
  name: 'tuiTips',
  props: {
    //top bottom center
    position: {
      type: String,
      default: 'top',
    },
    backgroundColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.7)',
    },
    color: {
      type: String,
      default: '#fff',
    },
    size: {
      type: Number,
      default: 30,
    },
  },
  data() {
    return {
      timer: null,
      show: false,
      msg: '无法连接到服务器~',
    };
  },
  methods: {
    showTips: function (options) {
      const { duration = 2000 } = options;
      clearTimeout(this.timer);
      this.show = true;
      // this.duration = duration < 2000 ? 2000 : duration;
      this.msg = options.msg;
      this.timer = setTimeout(() => {
        this.show = false;
        clearTimeout(this.timer);
        this.timer = null;
      }, duration);
    },
  },
};
</script>

<style scoped>
/*顶部消息提醒 start*/
.tui-toptips {
  width: 100%;
  padding: 18rpx 30rpx;
  box-sizing: border-box;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
  opacity: 0;
  transform: translateZ(0) translateY(-100%);
  transition: all 0.3s ease-in-out;
}

.tui-top-show {
  transform: translateZ(0) translateY(0);
  opacity: 1;
}

/*顶部消息提醒 end*/

/*toast消息提醒 start*/

/*注意问题：
 1、fixed 元素宽度无法自适应，所以增加了子元素
 2、fixed 和 display冲突导致动画效果消失，暂时使用visibility替代
*/
.tui-toast {
  width: 80%;
  box-sizing: border-box;
  color: #fff;
  font-size: 28rpx;
  position: fixed;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  transition: all 0.3s ease-in-out;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-toast-show {
  visibility: visible;
  opacity: 1;
}

.tui-tips-content {
  word-wrap: break-word;
  word-break: break-all;
  border-radius: 8rpx;
  padding: 18rpx 30rpx;
}

.tui-bottomtips {
  bottom: 120rpx;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.tui-centertips {
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
